<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import useDragAndDrop from "./useDnD";
import { getProcessList } from "@/api/modules/process";

const { onDragStart } = useDragAndDrop();

// 工序列表
const processList = ref([]);
const loading = ref(false);

// 获取工序列表
const getProcessData = async () => {
  loading.value = true;
  try {
    // 获取所有可用的工序（状态为已分配或运行中的工序）
    const params = {
      current: 1,
      size: 100, // 获取前100个工序
      status: "" // 不限制状态，获取所有工序
    };
    const res = await getProcessList(params);

    if (res.data && res.data.records) {
      processList.value = res.data.records;
    }
  } catch (error) {
    console.error("获取工序列表失败:", error);
    ElMessage.error("获取工序列表失败");
  } finally {
    loading.value = false;
  }
};

// 页面加载时获取工序数据
onMounted(() => {
  getProcessData();
});
</script>

<template>
  <aside>
    <div class="description">你可以把这些节点拖到工艺流程中</div>

    <div class="nodes" v-loading="loading">
      <!-- 开始节点 -->
      <!-- <div class="vue-flow__node-input" :draggable="true" @dragstart="onDragStart($event, 'input')">开始</div> -->

      <!-- 工序节点 -->
      <div
        v-for="process in processList"
        :key="process.id"
        class="vue-flow__node-default"
        :draggable="true"
        @dragstart="onDragStart($event, 'default', process)"
        :title="`工序编码: ${process.processCode}\n工序名称: ${process.processName}\n状态: ${process.status}`"
      >
        ({{ process.processCode }}){{ process.processName }}
      </div>


      <!-- 结束节点 -->
      <!-- <div class="vue-flow__node-output" :draggable="true" @dragstart="onDragStart($event, 'output')">结束</div> -->
    </div>
  </aside>
</template>

<style scoped>
.no-process {
  color: #999;
  font-size: 12px;
  text-align: center;
  margin: 10px 0;
}

.vue-flow__node-default {
  cursor: grab;
  transition: all 0.2s ease;
}

.vue-flow__node-default:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.vue-flow__node-default:active {
  cursor: grabbing;
}
</style>
